<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_setState方法解析</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let app = document.getElementById("app")
        let {Fragment,Component} = React

        class App extends Component{
            constructor(props) {
                super(props);
                this.state={
                    num:1
                };
            }
            render(){
                return <fieldset>
                    <legend><h2>setState解析</h2></legend>
                    <h3>num的值是：{this.state.num}</h3>
                    <button onClick={()=>this.btn1Click()} >按钮1</button>
                    <button onClick={()=>this.btn2Click()} >按钮2</button>
                    <button id="btn3" >按钮3</button>
                    <button onClick={()=>this.btn4Click()} >按钮4</button>
                    <button onClick={()=>this.btn5Click()} >按钮5</button>
                    <button onClick={()=>this.btn6Click()} >按钮6</button>
                    <button onClick={()=>this.btn7Click()} >按钮7</button>
                    <ol>
                        <h3>setState存在的问题</h3>
                        <li>setState在更新数据的时候有时是同步更新，有时是异步更新</li>
                        <li>在<strong>React控制的事件处理函数</strong>中，以及<strong>React的生命周期函数</strong>中，setState总是<strong>异步更新</strong>数据的</li>
                        <li>在<strong>React控制之外的事件</strong>中，setState总是<strong>同步更新</strong>数据的</li>
                    </ol>
                    <ol>
                        <h2>以后在使用setState时的注意点</h2>
                        <li>如果意识到setState是异步的，不要在调用完setState之后立刻获取state的值</li>
                        <li>也不要依赖state的当前值计算下一个值</li>
                        <li>setState方法不总是立刻更新的，会在将来延迟或者批量更新</li>
                    </ol>
                    <ol>
                        <h2>解决办法</h2>
                        <li>如果setState是异步更新，还想要在调用完setState之后获取到最新的值，我们需要给setState添加第2个参数，该参数是一个回调函数，在该函数里可以获取的state的值就是最新的</li>
                        <li>利用async和await也可以等待异步的执行完毕，进而获取最新的state</li>
                        <li>如果想要利用state的当前值计算state的值，setState的第一个参数不要再声明成对象，也声明成一个函数，函数里接收两个参数，当前的state和当前的props，我们利用这两个参数进行最新state值的计算</li>
                    </ol>
                </fieldset>
            }
            btn1Click(){
                this.setState({
                    num : this.state.num+1
                })
                console.log(this.state.num)
            }
            btn2Click(){
                setTimeout(()=>{
                    this.setState({
                        num : this.state.num+1
                    })
                    console.log(this.state.num)
                },10);
            }
            componentDidMount(){
                document.getElementById("btn3").addEventListener("click",()=>{
                    this.setState({
                        num : this.state.num+1
                    })
                    console.log(this.state.num)
                })
            }
            btn4Click(){
                this.setState({
                    num : this.state.num+1
                })
                this.setState({
                    num : this.state.num+1
                })
                this.setState({
                    num : this.state.num+1
                })
                this.setState({
                    num : this.state.num+1
                })
                console.log(this.state.num)
            }
            btn5Click(){
                this.setState({
                    num : this.state.num+1
                },()=>{
                    console.log(this.state.num)
                })

            }
            async btn6Click(){
                await this.setState({
                    num : this.state.num+1
                })
                console.log(this.state.num)
            }
            btn7Click(){
                this.setState((state,props)=>{
                    return {
                        num:state.num + 1
                    }
                },()=>{
                    console.log(this.state.num)
                })

            }

        }

        ReactDOM.render(<App></App>,app)
    </script>
</body>
</html>